<template>
  <div class="system-edit-user-container">
    <el-dialog :close-on-click-modal="false" :title="(acType == 'edit' ? '修改用户' : '添加用户')" v-model="isShowDialog" width="769px">
      <el-form ref="formRef" :model="ruleForm" :rules="rules" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
            <el-form-item label="账号名称" prop="userName" >
              <el-input v-model="ruleForm.userName" placeholder="请输入账户名称" clearable :disabled="acType != 'add'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="acType == 'add'" >
            <el-form-item label="账户密码" prop="password">
              <el-input v-model="ruleForm.password" placeholder="请输入账户密码" type="password"  show-password clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户昵称" prop="nickName">
              <el-input v-model="ruleForm.nickName" placeholder="请输入用户昵称" clearable :disabled="acType == 'details'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>
            </el-form-item>
          </el-col>
          
           <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="关联角色" >
              <el-select v-model="ruleForm.roleIds" placeholder="请选择" clearable class="w100" multiple>
                <el-option v-for="role in roleData" :key="'role-' + role.roleId" :label="role.roleName" :value="role.roleId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="部门" >
              <el-cascader :options="deptData"
                :props="{checkStrictly: true,emitPath:false, value: 'id',disabled:'a' }" placeholder="请选择部门"
                clearable  v-model="ruleForm.deptId">
                <template #default="{ node, data }">
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="岗位" prop="postIds">
              <el-select v-model="ruleForm.postIds" placeholder="请选择" clearable class="w100" multiple>
                <el-option v-for="post in postList" :key="'post-' + post.postId" :label="post.postName"
                  :value="post.postId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="性别">
              <el-radio-group v-model="ruleForm.sex">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户状态">
              <el-switch v-model="ruleForm.status"  inline-prompt :active-value="1" :inactive-value="0" active-text="启"
                inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
          <el-col  class="mb20">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="用户备注">
              <el-input v-model="ruleForm.remark" type="textarea" placeholder="请输入用户描述" maxlength="150"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer >
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default">{{acType=='edit' ? '修 改' : '添 加' }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref, unref } from 'vue';
import { addUserApi, editUserApi } from "@/api/auth/user";
import { ElMessage } from "element-plus";


export default defineComponent({
  name: 'systemEditUser',
  props: {
    deptData: {
      type: Array,
      default: () => []
    },
     roleData: {
      type: Array,
      default: () => []
    },
    genderData: {
      type: Array,
      default: () => []
    },
    acType: {
      type: String,
      default: () => 'add'
    }
  },
  setup(prop, { emit }) {
    const formRef = ref<HTMLElement | null>(null);
    const state = reactive({
      isShowDialog: false,
      ruleForm: {
        nickName:'',
        userName:'',
        password:'',
        email:'',
        phone:'',
        sex:null,
        status:1,
        remark:'',
        postIds:[], //岗位
        roleIds:[], //角色
        deptId:null,  //部门
      },
      //表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" }
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" }
        ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ]
      }
    });
    // 打开弹窗
    const openDialog = (row?: any) => {
      resetForm()
      if (row) {
        state.ruleForm = JSON.parse(JSON.stringify(row))
      }
      state.isShowDialog = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      state.isShowDialog = false;
    };
    // 取消
    const onCancel = () => {
      closeDialog();
    };
    // 新增
    const onSubmit = () => {
      console.log(state.ruleForm.deptId);
      
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          if (prop.acType == 'add') {
            //添加
            addUserApi(state.ruleForm).then(() => {
              ElMessage.success('用户添加成功');
              closeDialog(); // 关闭弹窗
              emit('getUserList')
            });
          } else if (prop.acType == 'edit') {
            const {userId,deptId,nickName,email,phone,sex,status,remark,roleIds}=state.ruleForm
            let obj={
              userId,
              deptId,
              nickName,
              email,
              phone,
              sex,
              status,
              remark,
              postIds:[],
              roleIds,
            }

            //修改
            editUserApi(obj).then(() => {
              ElMessage.success('用户修改成功');
              closeDialog(); // 关闭弹窗
              emit('getUserList')
            });
          }
        }
      });
    };
    // 初始化部门数据
    const initTableData = () => {
    };
    // 页面加载时
    onMounted(() => {
      initTableData();
    });
    const resetForm = () => {
      state.ruleForm = {
        nickName:'',
        userName:'',
        password:'',
        email:'',
        phone:'',
        sex:null,
        status:1,
        remark:'',
        postIds:[], //岗位
        roleIds:[], //角色
        deptId:null,  //部门
      }
    };
    return {
      openDialog,
      closeDialog,
      onCancel,
      onSubmit,
      formRef,
      ...toRefs(state),
    };
  },
});
</script>
